<template>
  <div>

    <el-row>

      <el-col :span="6">
        <div class="grid-content bg-purple">
<!--          <div class="block" v-for="fit in fits" :key="fit">-->
<!--            <span class="demonstration">{{ fit }}</span>-->
            <el-image
              style="width: 200px; height: 200px"
              :src="userAvater"
              fit="fill"></el-image>
<!--          </div>-->
        </div>
      </el-col>

      <el-col :span="6">
        <div class="grid-content bg-purple-light">
          <el-row>
            <el-col :span="10">
              <div class="grid-content bg-purple"></div>
              用户:<font color="#ff7f50">{{userName}}</font></el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light" @click="myGrade(grade,isVip,userId)"><font color="#dc143c">{{grade}}</font>级
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple-light" @click="myGrade(grade,isVip,userId)"><font color="#dc143c">{{isVip}}</font></div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple"></div>
              性别：<font color="blue">{{userGender}}</font></el-col>
          </el-row>
        </div>
      </el-col>

      <el-col :span="6">
        <div class="grid-content bg-purple">
          <el-row>
            <el-col :span="8">
              <div class="grid-content bg-purple"></div>
              地址：<font color="#d2691e">{{userAddress}}</font></el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light">粉丝：<font color="#ff1493">10</font></div>
            </el-col>
          </el-row>
        </div>
      </el-col>

      <el-col :span="6">
        <el-popover
          placement="right"
          width="400"
          trigger="click">
          <el-form ref="form" :model="form" label-width="80px">
            <!--action  请求后台接口 -->
            <el-upload
              class="avatar-uploader"
              action="http://127.0.0.1:8200/fancy-music-user/user/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="form.userAvater" :src="form.userAvater" v-modle="form.userAvater" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <hr/>

            <el-form-item label="昵称：">
              <el-input v-model="form.userName"></el-input>
            </el-form-item>
            <el-form-item label="性别：">
              <el-radio v-model="userGender" label="男">男</el-radio>
              <el-radio v-model="userGender" label="女">女</el-radio>
            </el-form-item>
            <el-form-item label="地址：">
              <el-input v-model="form.userAddress"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="updateUserInfo(form)">保存</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
          <el-button slot="reference">编辑个人信息</el-button>
        </el-popover>
      </el-col>
      <hr/>
    </el-row>
    <hr/>

    <div>
      <el-table
        :data="tableData"
        border
        style="width: 80%; align:center">

        <el-table-column
          fixed
          prop="musicName"
          label="歌曲名称"
          width="300">
        </el-table-column>

        <el-table-column
          prop="singerName"
          label="歌手姓名"
          width="350">
        </el-table-column>

        <el-table-column
          prop="numberOfListening"
          label="听歌次数"
          width="350">
        </el-table-column>

        <!--<thead>
        <th>歌曲名称</th>
        <th>歌手姓名</th>
        <th>听歌次数</th>
        </thead>-->

        <el-table-column
          fixed="right"
          label="操作"
          width="300">
          <template>
            <el-button @click="play()" type="text" size="small">播放</el-button>
            <el-button type="text" size="small">下载</el-button>
          </template>
        </el-table-column>

      </el-table>
      <hr/>
    </div>

  </div>
</template>

<script>
  import axios from 'axios';
  export default {
    name: "PersonalCenter",
    data() {
      return {
        isVip:'会员信息',
        //loginUserName:this.$route.params.loginUsername,
        userId: JSON.parse(sessionStorage.getItem("user_Id")),

        form: {
          userName: '',
          grade: '',
          userAddress: '',
          fans: '',
          userGender: '男',
          userAvater: ''
        },
        tableData: [],
        userName: '',
        grade: '',
        userGender: '',
        userAddress: '',
        fans: '',
        userAvater:'',
      }
    },
    mounted() {
      var userid = JSON.parse(sessionStorage.getItem("session_userId"))
      alert(userid);

      axios.post("http://127.0.0.1:8200/fancy-music-user/rank/getUserInfo?userId="+userid, this.ruleForm).then(res => {
        this.userName = res.data.userName;
        this.form.userName = res.data.userName;
        var userListenQuantity = res.data.userListenQuantity;
        this.grade = Math.floor(userListenQuantity / 10);
        this.userGender = res.data.userGender;
        this.userAddress = res.data.userAddress;
        this.form.userAddress = res.data.userAddress;
        this.url = res.data.userAvater;
        this.form.userId = res.data.userId;
        this.userAvater = res.data.userAvater;
        this.isVip=res.data.userVip;
      })
      axios.post("http://127.0.0.1:8200/fancy-music-user/rank/getRank?userId=" + userid).then(res => {
        //alert(res.data[1])
        this.tableData = res.data
      })
    },
    methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      handleClick(row) {
        console.log(row);
      },
      updateUserInfo(form) {
        console.log(form);
        axios.post("http://127.0.0.1:8200/fancy-music-user/user/update", this.form).then(res => {
          this.$router.go(0)
        })
      },
      play() {

        console.log(musicUrl);
      },
      myGrade(grade,isVip,userId) {
        this.$router.push({
            name: 'MyGrade',
            params: {
              grade: grade,
              isVip: isVip,
              userId:userId
            }
          }
        );
      },
      handleAvatarSuccess(res, file) {
        this.userAvater = URL.createObjectURL(file.raw);
        this.form.userAvater=res;
        alert(this.userAvater)
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    }
  }
</script>

<style scoped>

  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  .avatar-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 178px;
  }

  .avatar-uploader :hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
    align-self: center;
  }
</style>
